<template>
	<view class="container">
		<view class="content-wrapper">
			<image src="/static/gugong.jpg" mode="widthFix" style="width: 100%; border-radius: 10rpx;"></image>
			
			<view class="mt-20">
				<text class="block" style="font-weight: bold; font-size: 36rpx;">故宫博物院门票</text>
				<text class="block text-gray mt-10">明清两代的皇家宫殿，世界上现存规模最大、保存最完整的木质结构古建筑之一</text>
				
				<view class="flex align-center mt-20">
					<text class="text-red" style="font-size: 36rpx;">¥60</text>
					<text class="text-gray ml-20">门市价: ¥80</text>
				</view>
				
				<view class="flex mt-20">
					<text class="tag mr-10">5A景区</text>
					<text class="tag mr-10">文化古迹</text>
					<text class="tag">世界文化遗产</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">门票信息</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">门票类型</text>
					<text>成人票</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">有效期</text>
					<text>购买后1年内有效</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">使用时间</text>
					<text>每日 08:30-17:00</text>
				</view>
				
				<view class="info-item flex justify-between">
					<text class="text-gray">预约要求</text>
					<text>需提前1天预约</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">景点介绍</text>
				</view>
				
				<text class="block text-gray">
					故宫位于北京市中心，也称"紫禁城"。这里曾居住过24个皇帝，是明清两代(公元1368~1911年)的皇宫，
					现辟为"故宫博物院"。故宫的整个建筑金碧辉煌，庄严绚丽，被誉为世界五大宫之一(北京故宫、法国凡尔赛宫、
					英国白金汉宫、美国白宫、俄罗斯克里姆林宫)，并被联合国科教文组织列为"世界文化遗产"。
				</text>
			</view>
		</view>
		
		<view class="fixed-bottom flex">
			<view class="flex align-center" style="flex: 1; padding: 0 20rpx;">
				<text class="iconfont icon-collect" style="font-size: 40rpx; margin-right: 10rpx;"></text>
				<text>收藏</text>
			</view>
			<view class="button" style="flex: 2;" @click="buyTicket">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			buyTicket() {
				uni.showToast({
					title: '购买功能开发中',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.tag {
		background: #f5f5f5;
		color: #666;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}
	
	.info-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.content-wrapper {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 140rpx;
	}
</style>